/*
 * @Description:
 * @Author: huangmin
 * @Email: 812949176@qq.com
 * @Date: 2022-01-20 11:03:48
 * @LastEditors: huangmin
 * @LastEditTime: 2022-02-14 09:25:35
 * @FilePath: \jiulipu_penguin\src\components\RecipeItem\index.jsx
 */
/* eslint-disable no-unused-vars */
import React, { memo } from "react";
import { View, Image, Text } from "@tarojs/components";
import { Icon } from "@antmjs/vantui";
import "./index.less";

const Index = (props) => {
    const { data, num, handleClick, history } = props;
    let numClass = "";
    if (num === 1) {
        numClass = 'first'
    } else if (num === 2) {
        numClass = 'second'
    } else if (num === 3) {
        numClass = 'third'
    }
    const {
        image,
        material,
        recipe_id,
        username,
        user_id,
        avatar,
        score,
        thumbs,
        title,
        date
    } = data;
    return (
        <View className='recipe-item' onClick={() => {
            handleClick('recipe', recipe_id)
        }}
        >
            <View className='m-left'>
                <Image className='image' src={image} mode='aspectFill' lazyLoad={true} />
                {num ? <View className={['num', numClass]}>{num}</View> : null}
            </View>
            <View className='m-right'>
                <View className='title'><Text>{title}</Text></View>
                <View className='desc'>
                    {material ?
                        <View className='material' ><Text>{material}</Text></View>
                        : date ? <View className='date' ><Text>{date}</Text>
                            <Icon
                                style={{ marginLeft: "5px" }}
                                name='clock-o'
                                size='23'
                            />
                        </View> : null
                    }
                    <View className='thumb-score'>
                        <Text>{thumbs}人点赞</Text>
                        <Text>{score ? score : '暂无评'}分</Text>
                    </View>
                    <View className='username' onClick={(e) => {
                        e.stopPropagation();
                        handleClick('user', user_id,username)
                    }}
                    ><Image src={avatar} /><Text>{username}</Text></View>

                </View>
            </View>
        </View>
    );
};

export default memo(Index);
